<template>
	<view class="page-body">
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>
		<!-- #ifdef MP-WEIXIN -->
		<view class="top-nav">
			<view class="left">
				<!-- <image src="@/static/img/home_gray.png" mode="aspectFit" @click="goHome"></image> -->
			</view>
			<view class="middle"></view>
			<view class="right"></view>
		</view>
		<view class="login-logo">

			<text class="logo-text">欢迎登录</text>
		</view>
		<view class="login-box">
			<view class="sub-box">
				<!--<button class="login-btn" style="color: white;" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" withCredentials="true">微信用户一键登陆</button>-->

				<button class="login-btn" style="color: white;" :style="[{animationDelay: (1 + 1)*0.1 + 's'}]"
					open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" withCredentials="true">
					<text class="cuIcon-weixin"></text>
					&nbsp;微信一键登录</button>

			</view>
			<view class="logo-tips">
				<view><text>微信一键登录时会自动注册成为新账号</text></view>
				<view><text>登录代表同意一舟校园用户协议</text></view>

			</view>
		</view>

		<!-- #endif -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="login-tips" v-if="isWx==1" @click="goHome">
			<text>点击这里自动登录</text>
		</view>
		<view v-else>
			<view class="top-nav">
				<view class="left">
					<image :src="domain+'/static/img/home_gray.png'" mode="aspectFit" @click="goHome"></image>
				</view>
				<view class="middle"></view>
				<view class="right"></view>
			</view>
			<view class="login-logo">
				<text class="logo-text">欢迎登陆</text>
			</view>
			<view class="login-box">
				<view class="login-item" v-if="type==0">
					<input class="loginInput" @input="onKeyInput" type="text" placeholder="请输入账号"
						:value="login.username" data-key="username">
				</view>
				<view class="login-item" v-if="type==0">
					<input class="loginInput" @input="onKeyInput" password="true" type="text" placeholder="请输入密码"
						:value="login.password" data-key="password">
				</view>
				<view class="login-item" v-if="type==1">
					<input class="loginInput" type="number" @input="onKeyInput" placeholder="请输入手机号"
						:value="smlogin.mobile" data-key="mobile">
				</view>
				<view class="login-item" v-if="type==1">
					<input class="codeInput" type="number" maxlength=4 @input="onKeyInput" placeholder="请输入验证码"
						data-key="code">
					<text class="get-code" @click="getCode" v-if="is_sending==0">获取验证码</text>
					<text class="get-code" v-if="is_sending==1">{{times}}</text>
				</view>
				<view class="sub-box">
					<view class="login-btn" @click="submit">登陆</view>
				</view>
				<view class="logo-foot">
					<view>
						<view v-if="type==1" @click="changeType(0)"><text>账号密码</text></view>
						<view v-if="type==0" @click="changeType(1)"><text>手机验证</text></view>
					</view>
					<view class="forget"><text>忘记密码？</text></view>
				</view>
				<view class="logo-tips">
					<view><text>手机验证码登陆时会自动注册成为新账号</text></view>
					<view><text>登陆代表同意宠儿飞用户协议、隐私政策</text></view>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {},
		data() {
			return {
				domain: this.resDomain,
				title: "登录",
				login: {
					username: '',
					password: ''
				},
				smlogin: {
					mobile: '',
					code: ''
				},
				type: 0,
				wxLoginRes: {},
				is_wxfail: 0,
				is_sending: 0,
				times: 60,
				isWx: 0,
				wxLoginRes: '',
				timer: 0
			}
		},
		onLoad() {
			uni.removeStorageSync("authorization");
			this.getcode().then(code => {
				this.wxLoginRes = code;
			})

		},
		computed: {
			...mapState(['isResh'])
		},
		onShow() {
			/**
			 * 关于小程序的授权登录
			 */


		},
		methods: {
			/**
			 * 创建通信连接
			 */
			createSocket() {
				uni.connectSocket({
					url: "wss://xy.icefxy.com:3848",
					header: {
						'content-type': 'application/json',
					},
					method: 'GET',
					success: (res) => {
						this.onopen();
					},
					fail: (e) => {
						setTimeout(() => {
							this.createSocket();
						}, 3000)
					}
				})
			},
			/**
			 * 创建连接回调执行
			 */
			onopen() {
				let authorization = uni.getStorageSync('authorization');
				let dat = {
					'authorization': authorization
				}
				uni.onSocketOpen((res) => {
					uni.onSocketMessage((res) => {
						let dat = JSON.parse(res.data);
						if (dat.code == 200) {
							uni.$emit('notice', {
								msg: '消息通知',
								code: 200,
								data: dat.data
							})
						}
					})
				})

				/**
				 * 连接打开失败的监听
				 * @param {Object} res
				 */
				uni.onSocketError((res) => {
					setTimeout(() => {
						this.createSocket();
					}, 1000)
				});
			},
			getcode() {

				return new Promise((resolve, reject) => {
					uni.login({
						provider: "weixin",
						onlyAuthorize: true,
						univerifyStyle: true,
						success: (r) => {
							resolve(r.code);
						},
						fail: (e) => {
							reject(e)
						}
					})
				});
			},
			/**
			 * 授权获取手机号
			 * @param {Object} e
			 */
			onGetPhoneNumber(e) {
				let replay = 0;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let loginDat = {
					"code": "",
					"user_info": "",
					"mobile_info": {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv
					}
				}
				
			
				uni.checkSession({
					success: () => {
						loginDat.code = this.wxLoginRes;
						this.wxLogin(loginDat);
					},
					fail: () => {
						this.getcode().then(code => {
							this.wxLoginRes = code;
							loginDat.code = this.wxLoginRes;
							this.wxLogin(loginDat);
						})
					}
				})
			},
			wxLogin(loginDat) {
				
				if (this.statusState.is_share == 1 && this.statusState.user_id != -1) {
					loginDat = Object.assign(loginDat, this.statusState);
				}
				this.apiRequest('/buyer/yzlogin', loginDat, 0, "POST").then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.setStorageSync('authorization', res.data.token_type + ' ' + res.data.access_token);
						this.createSocket();
						this.$store.state.isResh = false;
						let pages = getCurrentPages();
						let beforePage = pages[pages.length - 2];
						uni.navigateBack({
							delta: 1,
							success: function() {

							}
						});

					} else {
						(this.timer > 1) ? (() => {
							uni.showModal({
								content: res.msg + "请重试",
								showCancel: false
							})
							this.getcode().then(code => {
								this.wxLoginRes = code;
							})
						})() : (() => {
							this.getcode().then(code => {
								this.wxLoginRes = code;
								loginDat.code = this.wxLoginRes;
								setTimeout(()=>{
									this.wxLogin(loginDat);
								},500);
								
							})
						})();
						this.timer++;

					}
				})
			},
			/**
			 * 获取授权的信息
			 * @param {Object} e
			 */
			getuserinfo(e) {
				uni.setStorage({
					key: "userInfo",
					data: e.detail.userInfo,
					success: (res) => {
						let pages = getCurrentPages();
						let beforePage = pages[pages.length - 2];
						uni.navigateBack({
							delta: 1,
							success: function() {
								beforePage.$vm.reciveAuth(true);
							}
						})
					}
				})
			}
		},
	}
</script>

<style>
	page,
	.page-body {
		background: #FFFFFF;
	}

	.top-nav {
		display: flex;
		height: 60rpx;
		padding: 60rpx 5% 0 5%;
	}

	.top-nav image {
		width: 50rpx;
		height: 50rpx;
	}

	.top-nav .left,
	.top-nav .right {
		width: 30%;
	}

	.top-nav .middle {
		text-align: center;
		width: 40%;
	}

	.login-logo {
		padding-top: 30%;
		width: 80%;
		margin: 0 10%;
	}

	.login-logo .logo-text {
		font-size: 55rpx;
	}

	.login-box {
		width: 80%;
		margin: 0 10%;
		padding: 50rpx 0 30rpx 0;
	}

	.login-box .login-item {
		display: flex;
		margin-bottom: 20rpx;
	}

	.login-item .loginInput {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 8rpx 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
		background: #FFFFFF;

	}

	.codeInput {
		height: 60rpx;
		line-height: 60rpx;
		padding: 8rpx 20rpx;
		border-bottom: 1rpx solid #CCCCCC;
		background: #FFFFFF;
		width: 55%;
	}

	.login-item .get-code {
		background: #1270e0;
		border-radius: 5rpx;
		width: 43%;
		margin-left: 2%;
		text-align: center;
		line-height: 70rpx;
		height: 70rpx;
		margin-top: 5rpx;
	}

	.login-btn {
		background: #1270e0;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
		text-align: center;
		width: 100%;
		margin-top: 30rpx;
	}

	.sub-box {
		margin-bottom: 30rpx;
	}

	.sub-box .forget {
		text-align: right;
	}

	.logo-foot {
		display: flex;
		justify-content: space-between;
	}

	.logo-tips {
		margin-top: 100rpx;
		color: #666666;
		font-size: 24rpx;
		text-align: center;
	}

	.mp-login {
		padding-top: 20%;
	}

	.login-tips {
		padding-top: 20%;
		text-align: center;
		width: 100%;
	}
</style>
